<template>
	<div class="equipmentbox">
		<p class="equipment_tit">设备生产公司信息</p>
		<div class="equipment_mesg clearfix">
			<div class="equipment_flbox">
				<div class="equipment_serchbox">
					<el-input
					  placeholder="请输入公司名称"
					  v-model="searcopname"
					  clearable>
            		  <el-button slot="append" icon="el-icon-search" @click="onQuery"></el-button>
					</el-input>
					
				</div>
				<div class="clearfix"  v-loading="loading">
					<div class="searcop_list" v-for="(companyname,index) in companynames" :key="index">{{companyname.equipmentCompanyName}}</div>
				</div>
			</div>
			<div class="equipment_frbox">
				<p class="equipment_frtit">添加设备生产公司</p>
				<p class="equipment_tips">*添加设备生产公司的信息，以便于维护业务支持人员的信息</p>
				
				<el-form :model="companyForm" ref="companyForm" label-width="100px" class="companyForm" center>
			      <el-form-item label="公司名称" prop="name">
			        <el-input class="equipment_nameinp" v-model="companyForm.equipmentCompanyName"></el-input>
			      </el-form-item>
			      <el-form-item>
				      <el-button type="primary" @click="onOk">保存</el-button>
				  </el-form-item>
			     </el-form>

			</div>
		</div>
	</div>
</template>
<script>
import bus from '@/api/bus'
import { getEquipmentCompanyList,saveEquipmentCompany} from '@/api'
export default {
    data() {
		return {
			roleId:'',
			searcopname: '',                 //查询公司名称
			companyForm:{                    //设备生产公司信息保存form
				equipmentCompanyName:""      //公司名称
			},
			companynames:[],                  //公司信息列表
			loading:true
		};
	},
	created () {                     //加载
		let params = {
			query: this.searcopname,//设备公司名称
			size:'99999',
          	page:'1'                
		}
		this.getCompanyList(params)  //调用查询
	},
	methods:{
		getCompanyList(params){      //查询
			getEquipmentCompanyList(params).then(res => {   //调用查询接口
				let code = res.data.code
				if(code == 0) {
					let data=res.data.data.list
					this.companynames = data
					this.loading = false
				} else if (code == 1) {
					this.$message({
						message: res.data.msg
					})
				}
			})
		},
		onQuery(){                                 //查询按钮
			if (this.loading) {
				return
			}
			this.loading = true
			let params = {
				query:this.searcopname,             //公司名称
				size:'99999',
          		page:'1' 
			}
			this.getCompanyList(params)            //调用查询
		},
		onOk(){                                    //保存按钮
			let params={
				equipmentCompanyName: this.companyForm.equipmentCompanyName
			}
			saveEquipmentCompany(params).then(res => {  
				let code = res.data.code    //添加接口
				if(code==0){                       //判断 code=0  成功
					let params={
						query: this.searcopname,
						size:'99999',
          				page:'1' 
					}
					this.companyForm.equipmentCompanyName = ''
					this.getCompanyList(params)             //调用查询
					this.$message({							//提示“添加成功”
						message: '添加成功'
					});
				} else if (code == 1) {
					this.$message({
						message: res.data.msg
					})
				}
			})
		}
	}
};
</script>
<style scoped>
  .equipment_tit{font-size:20px;padding:15px 0 10px;margin:0 20px 10px;}
  .equipment_tips{font-size:12px;color:#9f9f9f;}
  .equipment_flbox{float:left;width:300px;min-height:400px;margin:0 10px 0;border:1px solid #eee;}
  .equipment_frbox{overflow:hidden;min-height:400px;margin-right:10px;border:1px solid #eee;}
  .equipment_nameinp{width:300px;}
  .equipment_frtit{padding:5px 10px;}
  .equipment_tips{padding:5px 0px 5px 10px;}
  .searcop_list{padding:10px 0 10px 5px;border-bottom:1px solid #f1f1f1;cursor:pointer;}
  .equipment_serchbox{display:flex;padding:10px 5px;}
</style>